<template>
	<div class="son_content">
		<div class="son_content_title d-flex">
			<div class="item_col item_col1">周期</div>
			<div class="item_col item_col3">通知周期</div>
			<div class="item_col item_col4">通知频率</div>
			<div class="item_col item_col5">通知时间</div>
			<div class="item_col item_col6">通知方式</div>
			<div class="item_col item_col7">通知对象</div>
			<div class="item_col item_col8">
				<svg-icon
					@click="handleAdd"
					icon-class="project-detail-icon-add"
					class="icon"
				/>
			</div>
		</div>

		<div class="son_content_box d-flex">
			<el-form
				ref="stateRef"
				:model="formList"
				status-icon
				:rules="rules"
				label-width="120px"
				class="demo-state"
			>
				<div
					class="son_content_box_item m-t20 d-flex"
					v-for="(item, index) in formList"
					:key="index"
				>
					<div class="item_col item_col1 d-flex">
						<el-form-item prop="startDay">
							<el-input
								v-model="formList[index].startDay"
								type="text"
								autocomplete="off"
							/>
						</el-form-item>
						<span class="m-l5 m-r5">-</span>
						<el-form-item prop="endDay">
							<el-input
								v-model="formList[index].endDay"
								type="text"
								autocomplete="off"
							/>
						</el-form-item>
						<span class="m-l10">天</span>
					</div>
					<div class="item_col item_col3">
						<el-form-item prop="periodType">
							<el-select v-model="formList[index].periodType" placeholder="">
								<el-option label="天" :value="1" />
								<el-option label="周" :value="2" />
								<el-option label="月" :value="3" />
								<el-option label="季度" :value="4" />
								<el-option label="年" :value="5" />
							</el-select>
						</el-form-item>
					</div>
					<div class="item_col item_col4">
						<el-form-item prop="frequency">
							<el-select v-model="formList[index].frequency" placeholder="">
								<el-option label="1次" :value="1" />
								<el-option label="2次" :value="2" />
								<el-option label="3次" :value="3" />
								<el-option label="4次" :value="4" />
								<el-option label="5次" :value="5" />
							</el-select>
						</el-form-item>
					</div>
					<div class="item_col item_col5">
						<el-form-item prop="startTime">
							<el-time-picker
								v-model="formList[index].startTime"
								placeholder=""
								format="HH:mm:ss"
								value-format="YYYY-MM-DD HH:mm:ss"
							/>
						</el-form-item>
					</div>
					<div class="item_col item_col6">
						<el-form-item prop="noticeType">
							<el-select
								v-model="formList[index].noticeType"
								placeholder=""
							>
								<el-option label="全部" :value="1" />
								<el-option label="OA" :value="2" />
								<el-option label="站内" :value="3" />
							</el-select>
						</el-form-item>
					</div>
					<div class="item_col item_col7">
						<el-form-item  prop="taskNotification">
							<el-select
								v-model="formList[index].taskNotification"
								collapse-tags
                multiple 
								collapse-tags-tooltip
								placeholder=""
							>
								<el-option label="项目创建人" :value="2" />
								<el-option label="任务负责人" :value="3" />
								<el-option label="任务负责人部门领导" :value="4" />
							</el-select>
						</el-form-item>
					</div>
					<div class="item_col8">
						<svg-icon
							@click="handleDelete(item, index)"
							icon-class="project-detail-icon-delete"
							class="icon"
						/>
					</div>
				</div>
			</el-form>
		</div>
	</div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { messageApi } from "@/api/project";
import {
	ElForm,
	ElTimePicker,
	ElFormItem,
	ElSelect,
	ElInput,
	ElMessageBox,
} from "element-plus";

const props = defineProps({
	formList: {
		type: Array,
		default: [],
	},
	type: {
		type: String,
		default: "",
	},
});

const state = reactive({
	pass: "",
});
const rules = ref([]);

const handleAdd = () => {
	props.formList.push({});
};
const handleDelete = (item, index) => {
	ElMessageBox.confirm("确认删除吗?", {
		confirmButtonText: "删除",
		cancelButtonText: "取消",
		type: "warning",
	})
		.then(() => {
			if (item.noticeConfigId) {
				messageApi.deleteById({ id: item.noticeConfigId }).then((res) => {
					if (res.code == 200) {
						ElMessage.success("删除成功");
						props.formList.splice(index, 1);
					}
				});
			} else {
				props.formList.splice(index, 1);
			}
		})
		.catch(() => {});
};

const hhhh = (e) => {
	console.log(e);
};

const getArr = () => {
	return props.formList.map((v) => {
		v.configType = props.type;
		return v;
	});
};

defineExpose({
	getArr,
});
</script>
<style lang="scss" scoped>
.son_content {
	.son_content_title {
		.item_col {
			font-size: 14px;
			font-family: SourceHanSansCN-Medium, SourceHanSansCN;
			font-weight: 700;
			color: #000000;
		}
	}

	// .son_content_box {
	// 	.son_content_box_item {
	// 	}
	// }
	.item_col {
		margin-right: 20px;
		line-height: 40px;
		text-align: left;
	}
	.item_col1 {
		width: 230px;
		.el-form-item {
			width: 80px;
		}
	}
	.item_col3 {
		width: 120px;
	}
	.item_col4 {
		width: 120px;
	}
	.item_col5 {
		width: 143px;
		.el-form-item__content {
			.el-input__wrapper {
				height: 40px;
			}
		}
	}
	.item_col6 {
		width: 170px;
	}
	.item_col7 {
		width: 215px;
	}
	.item_col8 {
		line-height: 50px;
		.icon {
			width: 28px;
			height: 28px;
			cursor: pointer;
		}
		.icon:nth-child(2) {
			width: 25px;
			height: 25px;
		}
	}

	:deep(.el-form-item__content) {
		margin-left: 0 !important;
	}
}
</style>
